<template>
	<view :style="skin" class="losePage">
		<block v-if="loseInfoShow">
			<view class="listMain">
				<view class="overdueList" v-for="(item,index) in lostList" :key="index" @click="handleView(item)">
					<view class="overdueListLeft">
						<u--image shape="circle" :src="src" width="75px" height="75px"></u--image>
					</view>
					<view class="overdueListRight">
						<view class="rightTips">
							{{$t('lease.productModel')}}: {{item.productModel}}
						</view>
						<view class="rightTips">
							{{$t('lease.productID')}}: {{item.productId}}
						</view>
						<view class="rightTips">
							{{$t('property.loser')}}: {{item.lostCustomerAccount}}
						</view>
						<view class="rightTips">
							{{$t('property.reasonLoss')}}: {{item.lostReason}}
						</view>
						<view class="rightTips">
							{{$t('property.lossDate')}}: {{item.lostDate}}
						</view>
						<view class="rightTips" v-if="item.lostUnAudit === null">
							Reported lost
						</view>
						<view class="rightTips" v-else>
							Audit status: {{item.lostUnAudit == 0?'Under review':item.lostUnAudit == 1?'pass':'Not Pass'}}
						</view>
					</view>

				</view>
			</view>
			<view class="confir">
				<u-button color="var(--subjectColor)" @click="handleClick(1)">{{$t('property.reportLoss')}}
				</u-button>
				<!-- 	<u-button customStyle="margin-left: 10px;" color="var(--subjectColor)"
					@click="handleClick(2)">{{$t('property.itemRecovered')}}
				</u-button> -->
			</view>
		</block>

		<block v-else>
			<view class="listMain">
				<!-- 上报丢失 -->
				<block v-if="loseStatus == 'lose'">
					<view class="title">{{$t('property.reportLoss')}}
						<text class="iconfont icon-a-mingchengarrow_left iconLeft" @click="goback"></text>
					</view>
					<view class="overdueList overdueInfo">
						<view class="overdueListLeft">
							<u--image shape="circle" :src="src" width="75px" height="75px"></u--image>
						</view>
						<view class="overdueListRight">
							<view class="rightTips" @click="sheetTypeShow = true">
								{{$t('lease.productModel')}}: {{obj.productModel}}
								<text class="iconfont icon-a-mingchengarrow_down icondown"></text>
							</view>
							<view class="rightTips" @click="handleViewDevice">
								{{$t('lease.productID')}}: {{obj.productId}}
								<text class="iconfont icon-a-mingchengarrow_down icondown"></text>
							</view>
							<view class="rightTips">
								{{$t('property.loser')}}: {{nickname}}
							</view>
							<!-- <view class="rightTips">
								{{$t('property.reasonLoss')}}: 理由
							</view> -->
							<view class="rightTips">
								{{$t('property.lossDate')}}: {{getNewDate}}
							</view>
							<view class="rightTips deduct">
								{{$t('property.lossdeMo')}}: {{agencySecurityDeposit}}MWK 
							</view>
						</view>
					</view>

					<view class="mt16">
						{{$t('property.reasonLoss')}}:
						<u--textarea v-model="obj.lostReason" :placeholder="$t('lease.pleEnter')" count></u--textarea>
					</view>

					<view class="footerBtn">
						<u-button @click="handleLost" color="var(--subjectColor)">{{$t('property.confirmLoss')}}
						</u-button>
					</view>
				</block>
				<!-- 丢失找回 -->

				<block v-else>
					<view class="title">{{$t('property.itemRecovered')}}
						<text class="iconfont icon-a-mingchengarrow_left iconLeft" @click="goback"></text>
					</view>
					<view class="overdueList overdueBack">
						<view class="overdueListLeft">
							<u--image shape="circle" :src="src" width="75px" height="75px"></u--image>
						</view>
						<view class="overdueListRight">
							<view class="rightTips">
								{{$t('lease.productModel')}}: {{lostBackObj.productModel}}
							</view>
							<view class="rightTips">
								{{$t('lease.productID')}}: {{lostBackObj.productId}}
							</view>
							<view class="rightTips">
								{{$t('property.loser')}}: {{lostBackObj.lostCustomerAccount}}
							</view>

							<view class="rightTips">
								{{$t('property.reasonDate')}}: {{getNewDate}}
							</view>
							<view class="rightTips">
								{{$t('property.daysLost')}}: {{lostDay}}Day
							</view>
							<!-- 	<view class="rightTips">
								{{$t('property.deductionLoss')}}: 10000
							</view> -->
							<view class="rightTips giveBack">
								{{$t('property.returnAmount')}}: {{moneyTran(agencySecurityDeposit)}}MWK 
							</view>
						</view>

					</view>
					<view class="mt16">
						{{$t('property.reasonRecovery')}}:
						<u--textarea v-model="lostUnReason" :placeholder="$t('lease.pleEnter')" count></u--textarea>
					</view>
					<view class="footerBtn">
						<u-button color="var(--subjectColor)" @click="handleBack">{{$t('property.reportReview')}}
						</u-button>
					</view>

				</block>
			</view>
		</block>

		<!-- 设备 -->
		<u-action-sheet @close="sheetShow = false" @select="selectDevice" cancelText="Cancel" :actions="deviceList"
			:show="sheetShow"></u-action-sheet>
		<!-- 类型 -->
		<u-action-sheet @close="sheetTypeShow = false" @select="selectDeviceType" cancelText="Cancel" :actions="deviceTypeList"
			:show="sheetTypeShow"></u-action-sheet>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		addDevice,
		getDeviceTypeToId,
		
	} from '@/utils/sql/sqlDevice.js'
	import {
		getDeviceType,
		addDeviceType
	} from '@/utils/sql/sqlDeviceType.js'
	import {
		getNewYMD
	} from '@/utils/index.js'
	import {
		leaPid
	} from '@/utils/sql/sqllease.js'
	import {
		lostReport,
		pageStockLost,
		lostBack
	} from '@/api/leaProductLost.js'
	import {
		getPriceTypeToId
	} from '@/utils/sql/sqlPrice.js'
	import {
		addLease
	} from '@/utils/sql/sqllease.js'

	export default {
		data() {
			return {
				deviceTypeList: [],
				sheetTypeShow: false,
				src: '',
				loseStatus: 'lose',
				loseInfoShow: true,
				sheetShow: false,
				deviceList: [],
				obj: {},

				lostList: [],

				lostBackObj: {
					
				},
				lostUnReason:'',
				agencySecurityDeposit: '--',
				nickname: '', //丢失人
				actionDeviceType:{},
				
				appearObj:null,//盘点转丢失的数据
			};
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			}),
			getNewDate() {
				return getNewYMD()
			},
			lostDay() {
				console.log(getNewYMD());
				// 将给定日期转换为Date对象
				var givenDate = new Date(this.lostBackObj.lostDate).getTime();
				
				// 获取今天的日期
				var today = new Date().getTime();
			
				// 计算两个日期之间的差值（毫秒）
				var difference = today - givenDate;
					console.log(givenDate,today,difference);
				// 将毫秒转换为天数
				return Math.ceil(difference / (1000 * 3600 * 24));
			},


		},
		mounted() {
			let that = this
			this.getLostPage();
			this.getTypeList();
			uni.$on('lostBack',function(){
				console.log('lostBack');
				that.getLostPage();
			})
		},

		methods: {
			moneyTran(m) {
				console.log(m);
				return (m / 100).toFixed(2)
			},
			handleViewDevice(){
				let that = this
				if(this.deviceList.length == 0){
					uni.showToast({
						title:that.$t('lease.NoDevicesModel'),
						icon:'none'
					})
					return false
				}
				this.sheetShow = true
				
			},
			// 上报找回
			handleBack() {
				console.log(this.lostBackObj);
				if(this.lostUnReason == ''){
					uni.showToast({
						title:'Please enter the retrieval reason',
						icon:'none',
					})
					return false
				}
				let lostObj = {
					id: this.lostBackObj.id,
					lostStatus: '1',
					lostUnReason: this.lostUnReason,
				}
				console.log(lostObj);
				lostBack(lostObj).then(res => {
					console.log(res);
					if (res.code == 0) {
						uni.showToast({
							title: 'Report successful, waiting for review',
							icon: 'none'
						});
						this.goback()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			},
			handleView(item) {
				if(item.lostStatus == 1 && item.lostUnAudit == 0){//审核中
					uni.showToast({
						title:'Under review',
						icon:'none'
					})
					return false
				}
				
				if(item.lostStatus == 1 && item.lostUnAudit == 1){
					uni.showToast({
						title:'Recovered',
						icon:'none'
					})
					return false
				}
				
				
				this.loseInfoShow = false
				this.loseStatus = 'back'
				console.log(item);
				this.lostBackObj = item
				getPriceTypeToId(item.productModel).then(res => {
					console.log(res);
					if (res.code == 0 && res.data.length > 0) {

						this.agencySecurityDeposit = res.data[0].agencySecurityDeposit;
					} else {
						this.agencySecurityDeposit = 0
					}
				})

			},
			// 获取丢失列表
			getLostPage() {
				// lostStatus 0 没找回 1已经找回
				pageStockLost().then(res => {
					console.log(res);//0未审核 1通过 2不通过  
					if(res.code == 0){
						this.lostList = res.data.records
					}else{
						uni.showToast({
							title:res.msg,
							icon:'error'
						})
					}
					
				})
			},
			// 确定丢失
			handleLost() {
				console.log(this.obj);
				uni.showLoading({
					title: 'Waiting'
				})
				
				lostReport({
					productModel: this.obj.productModel,
					productId: this.obj.productId,
					lostCustomerAccount: this.obj.lostCustomerAccount,
					lostReason: this.obj.lostReason,
				}).then(res => {
					console.log(res);
					uni.hideLoading()
					if (res.code == 0) {
						uni.showToast({
							title: 'Report successfully',
							icon:'none'
						})
						let obj = {
							productId: this.obj.productId,
							stockStatus: 8
						}
						addDevice(obj) //修改设备详情
						

						if (this.obj.leaseId) { //丢失的是租赁的设备，将状态改为leaseStatus 丢失 4
							let obj = {
								leaseId: this.obj.leaseId,
								leaseStatus: 8
							}
							addLease(obj)
						}
							
						let tenantableNum = 0
						if(parseInt(this.actionDeviceType.tenantable) > 0){
							 tenantableNum = parseInt(this.actionDeviceType.tenantable) - 1
						}
						let inStoreNum = 0
						if(parseInt(this.actionDeviceType.inStore) - 1){
							inStoreNum = parseInt(this.actionDeviceType.inStore) - 1
						}
						this.actionDeviceType.tenantable = tenantableNum.toString()
						this.actionDeviceType.inStore = inStoreNum.toString()
						
						let typeObj = {
							productModel:this.actionDeviceType.productModel,
							inStore:this.actionDeviceType.inStore,
							tenantable:this.actionDeviceType.tenantable,
						}
						console.log(typeObj);
						addDeviceType(typeObj)
						
						this.$emit('updateDeviceType')

						this.goback()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			selectDeviceType(item) {
				console.log(item);
				this.actionDeviceType = item
			
			
				this.obj.productModel = item.productModel
				this.obj.productId = ''
				this.nickname = ''
				this.deviceList = []
				this.getDeviceList(item.productModel)
				getPriceTypeToId(item.productModel).then(res => {
					if (res.code == 0 && res.data.length > 0) {
						this.agencySecurityDeposit = res.data[0].agencySecurityDeposit
					} else {
						this.agencySecurityDeposit = '0'
					}
				})
			},
			selectDevice(item) {
				console.log(item);
				this.obj.productId = item.productId
				leaPid(item.productId).then(res => {
					console.log(res);
					if (res.code == 0 && res.data.length > 0) {
						this.obj.lostCustomerAccount = res.data[0].customerAccount
						this.nickname = res.data[0].nickname
						this.obj.leaseId = res.data[0].leaseId
					} else {
						this.obj.lostCustomerAccount = ''
						this.nickname = ''
						this.obj.leaseId = ''
					}
				})
			},
			getTypeList() {
				getDeviceType().then(res => {
					console.log(res);
					res.data.map(item => {
						return item.name = item.productModel
					})
					this.deviceTypeList = res.data
				})
			},
			getDeviceList(productModel) {
				getDeviceTypeToId(productModel).then(res => {
					console.log(res);
					if(res.data.length > 0){
						res.data.map(item => {
							return item.name = item.productId
						})
						this.deviceList = res.data
					}
					
					
				})
			},
			handleClick(num) {
				if (num == 1) {
					let netWork = uni.getStorageSync('isNetWork');
					console.log(netWork);
					if(netWork){
						uni.showToast({
							title:'No Network',
							icon:'none',
							duration:2000
						})
						return false
					}
					
					// this.loseInfoShow = false
					// this.loseStatus = 'lose'
					console.log(num);
					uni.navigateTo({
						url:'/pages/property/faultLost/faultLost'
					})
				} else {
					this.loseInfoShow = false
					this.loseStatus = 'back'
				}
			},
			goback() {
				this.lostUnReason = ''
				this.loseInfoShow = true
				this.getLostPage()
				this.getTypeList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.losePage {
		padding: 16px;
		box-sizing: border-box;
		height: 100%;
		position: relative;

		.listMain {
			height: calc(100% - 60px);
			overflow-y: auto;

			.footerBtn {
				position: absolute;
				bottom: 16px;
				width: calc(100% - 32px);
			}

			.title {
				width: 100%;
				height: 55px;
				background-color: #4080FF;
				text-align: center;
				line-height: 62px;
				margin-bottom: 16px;
				color: #fff;
				border-radius: 8px;
				position: relative;

				.iconLeft {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translate(0%, -50%);
				}
			}
		}

		.overdueList {
			width: 100%;
			padding: 16px 0;
			box-sizing: border-box;
			height: 180px;
			display: flex;
			background-color: #fff;
			border: 1px solid #ccc;
			margin-bottom: 8px;
			.overdueListLeft {
				width: 102px;
				height: calc(100% - 16px);
				margin-top: 8px;
				border-right: 1px solid #ccc;
				display: flex;
				flex-direction: column;
				align-items: center;

				.leftTips {
					width: 96px;

				}
			}

			.overdueListRight {
				font-size: 14px;
				color: #101010;
				padding-left: 16px;
				box-sizing: border-box;

				.rightTips {
					line-height: 22px;

					.iconRight {
						// float: right;
					}

					.icondown {
						float: right;
					}
				}

				.deduct {
					color: #BD3124;
				}

				.giveBack {
					color: #81B337;
				}
			}
		}

		.overdueInfo {
			height: 140px;
			margin-bottom: 16px;
		}

		.overdueBack {
			height: 160px;
			margin-bottom: 16px;
		}

		.confir {
			width: 100%;
			margin: 16px auto 0;
			height: 48px;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
		}
	}
</style>